/**
 * @author 14544
 * @date 2020/3/26 11:24
 */
let TEST_URL = '/gov/gov.do?methodname=queryDocStatuses&serviceid=gov_status';
// 上传文件中的进度
{
    // 注意 onprogress 事件仅仅在下载阶段工作。 想要获取上传中的进度，xhr中有一个对象: xhr.upload 专门用于上传文件的事件监听
    // 同理 xhr.upload 可以只在上传阶段被触发：
    // xhr.upload.onloadstart — 上传开始。
    // xhr.upload.onprogress — 上传期间定期触发。 上传进度就靠这个方法
    // xhr.upload.onabort — 上传终止。
    // xhr.upload.onerror — 非 HTTP 错误。
    // xhr.upload.onload — 上传成功完成。
    // xhr.upload.ontimeout — 上传超时（如果设置了 timeout 属性）。
    // xhr.upload.onloadend — 上传操作完成，不管成功或失败。

    // <input type="file" onchange="upload(this.files[0])">
    // 创建上传节点
    let uploadInput = document.createElement('input');
    uploadInput.type = 'file';
    uploadInput.name = "uploadInput";
    let xhr = null;
    uploadInput.onchange = function (event) {
        xhr = new XMLHttpRequest();
        console.log(event.target.files[0])
        uploadFun(event.target.files[0])
    }
    document.getElementById('app').appendChild(uploadInput)

    // 创建取消请求节点
    let abortBtn = document.createElement('button');
    abortBtn.innerText = '取消请求'
    document.getElementById('app').appendChild(abortBtn)
    // 点击终止请求
    abortBtn.onclick = function () {
        // 使用最新的ES11标准 可选链路运算符 ? 表示前面的值不为null和undefined的情况下，返回后面的方法
        // 如图 xhr && xhr.upload && xhr.abort()
        xhr?.upload && xhr.abort()  // 它将会触发 onabort 事件且 xhr.status 变为 0。
    }

    // 创建上传进度显示节点
    let progressDiv = document.createElement('div');
    progressDiv.id = 'progressDiv';
    progressDiv.style.width = '0'
    progressDiv.style.height = '20px'
    progressDiv.style.borderRadius = '5px'
    progressDiv.style.border = '1px solid gray'
    progressDiv.style.color = 'black'
    progressDiv.style.textAlign = 'center'
    progressDiv.style.width = '100px';
    progressDiv.innerText = '0%';
    progressDiv.style.transition = 'all 50ms';
    document.getElementById('app').appendChild(progressDiv)

    let uploadFun = function (file) {
        xhr.responseType = 'json'
        let proDiv = document.getElementById('progressDiv');
        proDiv.style.width = '100px';
        proDiv.innerText = '0%';
        xhr.upload.onloadstart = function (event) {
            console.log('上传开始')
        };
        xhr.upload.onprogress = function (event) {
            let rate = `${Math.floor((event.loaded / event.total) * 100) + '%'}`;
            console.log(`上传了 ${event.loaded} of ${event.total} bytes，进度：${rate}`)
            proDiv.style.width = rate;
            proDiv.innerText = rate;
            proDiv.style.color = '#fff';
            proDiv.style.backgroundColor = 'blue';
        };
        xhr.upload.onload = function (event) {
            console.log('上传成功')
            console.log(`loaded status:${xhr.status}`)
            console.log(xhr.response)
        };
        xhr.upload.onerror = function (event) {
            console.log('上传失败')
        };
        xhr.upload.onloadend = function (event) {
            console.log('上传操作结束 不管成功失败都要执行此事件')
        };
        xhr.timeout = 10000;
        xhr.upload.ontimeout = function (event) {
            console.log('上传超时')
        };
        xhr.upload.onabort = function (event) {
            console.log(`取消上传 status:${xhr.status}`)
        }
        xhr.open('POST', '/gov/openapi/uploadFile', true);
        xhr.setRequestHeader('Content-Type', 'multipart/form-data');
        let formData = new FormData()
        formData.append('file', file)
        xhr.send(formData)
    }
}
